<template>
	<view class="container" @touchstart="touchHandleStart" @touchend="touchHandleEnd">
		<!-- 初始loading效果 -->
		<view :class="loading?'loading_box':'loading_box hideLoading'">
			<image class="loading_img" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/946f921e-b438-4c4d-a054-72c26eb1a960.gif"></image>
			<image class="page_bg_gif" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/6e6187aa-11a3-444f-83fd-fd90ae515a84.gif"></image>
		</view>
		<block v-if="!loading">
			<!-- 音乐播放器部分 -->
			<view class="music_block">
				<view class="music_block_bg">
					<view :class="musicType?'music_block_pan':'music_block_pan notAnimate'" @click="handleMusic">
						<image src="/static/icon/music.png" mode="widthFix" />
					</view>
					<view class="note_block" :style="musicType?'':'opacity: 0'">
						<image class="note1" src="/static/icon/note1.png" mode="widthFix" />
						<image class="note2" src="/static/icon/note2.png" mode="widthFix" />
						<image class="note3" src="/static/icon/note1.png" mode="widthFix" />
						<image class="note4" src="/static/icon/note2.png" mode="widthFix" />
					</view>
				</view>
			</view>
			<!-- 效果背景 -->
			<!-- <view class="pageBack" :style="musicType?'':'display:none'">
				<view class="page_block" v-for="v in blockNum" :key="v">
					<view class="page_block_in">
					</view>
				</view>
			</view> -->
			<!-- 第一页 -->
			<pictures v-if="pageNum === 1"></pictures>
			
			<!-- 第二页 -->
			<pictureShell v-if="pageNum === 2" :height="'930rpx'">
				<pictureTow></pictureTow>
			</pictureShell>
			
			<!-- 第三页 -->
			<pictureShell v-if="pageNum === 3" :height="'960rpx'">
				<pictureThree></pictureThree>
			</pictureShell>
			
			<!-- 第四页 -->
			<pictureShell v-if="pageNum === 4" :height="'960rpx'">
				<pictureFour></pictureFour>
			</pictureShell>
			
			<!-- 第五页 -->
			<pictureShell v-if="pageNum === 5" :hasDoor="false" :height="'1000rpx'">
				<pictureFive></pictureFive>
			</pictureShell>
			
			<!-- 第六页 -->
			<pictureShell v-if="pageNum === 6" :height="'1030rpx'">
				<pictureSix></pictureSix>
			</pictureShell>
			
			<!-- 第七页 -->
			<pictureShell v-if="pageNum === 7" :height="'900rpx'">
				<pictureSeven :mapInfo="mapInfo"></pictureSeven>
			</pictureShell>
		</block>
	</view>
</template>

<script lang="ts" setup>
	import { onShow, onShareAppMessage } from '@dcloudio/uni-app' 
	import { ref,onMounted,reactive } from 'vue'
	import pictures from './pictures/pictureOne.vue'
	import pictureShell from '/components/pictureShell/pictureShell.vue'
	import pictureTow from './pictures/pictureTow.vue'
	import pictureThree from './pictures/pictureThree.vue'
	import pictureFour from './pictures/pictureFour.vue'
	import pictureFive from './pictures/pictureFive.vue'
	import pictureSix from './pictures/pictureSix.vue'
	import pictureSeven from './pictures/pictureSeven.vue'
	
	const fileList = ref([])
	
	const blockNum:number = ref(25); // 分块的个数
	
	const musicType: Boolean = ref(true) // 音乐播放状态
	
	const musicSrc: String = ref('') // 音乐路径
	
	let innerAudioContext = {} // 音频dom
	
	const pageNum: Number = ref(1) // 当前图片页码
	
	const lastPage: Number = ref(7) //末尾页码
	
	const startX: Number = ref(0) // 开始X轴坐标
	const startY: Number = ref(0) // 开始Y轴坐标
	
	const loading: Boolean = ref(true) //loading显隐
	
	interface mapObj {
		latitude: Number,
		longitude: Number,
		name: String,
		address: String
	}
	
	const mapInfo: mapObj = ref({}) // 地图信息对象
	
	// 定时器对象
	let slideTimer = 0
	
	// 生成计时器的方法
	const createTimer = ()=>{
		// 生成定时器自动滑动
		slideTimer = setInterval(()=>{
			if(pageNum.value < lastPage.value) {
				pageNum.value++
			} else {
				// 触底后删除定时器
				clearInterval(slideTimer)
			}
		},6666)
	}
	
	// 操作音乐播放的方法
	const handleMusic = ()=>{
		musicType.value = !musicType.value
		if(musicType.value) {
			innerAudioContext.play();
		} else {
			innerAudioContext.pause()
		}
	}
	
	// 获取音乐播放路径地址
	const getMusicSrc = async ()=>{
		console.log("执行了请求")
		await uniCloud.callFunction({
			name: 'getFiles', // 云函数名字
			// 传输数据
			data: {},
			// 成功
			success({result}) {
				const resData = result.data;
				console.log(resData);
				if(result.code === 200) {
					// 赋值总列表
					fileList.value = resData.filter(ele=>ele.type == 'img')
					uni.setStorageSync('fileList', fileList.value)
					console.log('页面外',uni.getStorageSync('fileList'))
					// 操作音频播放
					const musicObj = resData.find(ele=>ele.type == 'music')
					const url = musicObj.url
					musicSrc.value = url
					innerAudioContext = uni.createInnerAudioContext()
					console.log(musicSrc.value)
					innerAudioContext.src = musicSrc.value
					innerAudioContext.loop = true;
					innerAudioContext.play();
					
					innerAudioContext.onPlay(()=>{
						console.log('播放了')
					}) // 播放
				}
			},
			//失败
			fail(e) {
				console.log(e);
			}
		})
	}
	
	// 获取地图地址
	const getMapInfo = async ()=>{
		return new Promise((resolve,reject)=>{
			uniCloud.callFunction({
				name: 'getAddress', // 云函数名字
				// 传输数据
				data: {
				},
				// 成功
				success({result}) {
					const resData = result.data;
					mapInfo.value = resData
					console.log(resData);
					resolve(true)
				},
				//失败
				fail(e) {
					console.log(e);
					reject(false)
				}
			})
		})
		
	}
	
	// 初始执行
	const loadFun = async ()=>{
		await getMusicSrc()
		await getMapInfo();
		console.log('马上设置定时器')
		setTimeout(()=>{
			loading.value = false
			// loading结束后成功新的自动滑动定时器
			createTimer()
		},2000)
	};
	loadFun()
	
	// 移动开始 --- 只监听左右滑动，所以
	const touchHandleStart = (event)=>{
		const moveObj = event.changedTouches[0]
		startX.value = moveObj.pageX
		startY.value = moveObj.pageY
		// 移动开始删除之前的定时器
		clearInterval(slideTimer)
	}
	
	// 移动结束
	const touchHandleEnd = (event)=>{
		const moveObj = event.changedTouches[0]
		const endX = moveObj.pageX
		console.log(moveObj)
		if(Math.abs(startX.value - endX)>50) {
			// 这个时候
			musicType.value = false
			if(startX.value>endX) {
				// 右滑
				console.log('右滑了')
				if(pageNum.value < lastPage.value) {
					pageNum.value++
				}
			} else {
				// 左滑
				console.log('左滑了')
				console.log(pageNum.value)
				if(pageNum.value > 1) {
					console.log(pageNum.value)
					pageNum.value--
				}
			}
			// 因为改变值是微任务
			setTimeout(()=>{
				musicType.value = true
			},100)
		}
		// 上面逻辑判断完成后重新打开定时器
		createTimer()
	}
	
	
	onShow(()=> {
		uni.setKeepScreenOn({
		  keepScreenOn: true,
		   fail() {//如果失败 再进行调用
			 uni.setKeepScreenOn({
				 keepScreenOn: true
			 });
		   }
		});
	})
	
	onMounted(()=>{
		const ctx=uni.createCanvasContext('imgBox');
		const img = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/66b24d17-1555-4c53-ba3b-d05e106e221f.jpg";;
		uni.getImageInfo({
			src:img,
			success(res) {
				// ctx.drawImage(res.path,0,0,100,100 );
				// ctx.drawImage(res.path,100,100,100,100 );
				ctx.draw()
			}
		})
		
	})
	
	onShareAppMessage((res)=>{
		console.log(res)
		return {
			title: '诚邀您参加我们的婚礼',
			path: '/pages/index/index',
			imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/8aeb9e12-aad8-49f4-aff1-1284fd9fbb33.png'
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		overflow: hidden;
		font-size: 14px;
		line-height: 24px;
		position: relative;
		.loading_box {
			position: fixed;
			width: 100vw;
			height: 100vh;
			display: grid;
			place-items: center center;
			z-index: 101;
			background: linear-gradient(45deg, #f1ccb8, #fff);
			.loading_img {
				width: 500rpx;
				height: 280rpx;
			}
			.page_bg_gif {
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
		}
		.hideLoading {
			animation: hideLoad 1s linear;
			animation-fill-mode: forwards;
		}
		@keyframes hideLoad {
			0% {
				opacity: 1;
			}
			99% {
				height: 100vh;
			}
			100% {
				opacity: 0;
				height: 0;
			}
		  }
		.music_block {
			position: fixed;
			right: 32rpx;
			top: 15vh;
			z-index: 1000;
			width: 80rpx;
			.music_block_bg {
				position: relative;
				.note_block {
					transition-duration: .5s;
					>image {
						width: 30rpx;
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						opacity: 0;
						-webkit-backface-visibility: hidden;
					   -moz-backface-visibility: hidden;
					   -ms-backface-visibility: hidden;
					   backface-visibility: hidden;
					 
					   -webkit-perspective: 1000;
					   -moz-perspective: 1000;
					   -ms-perspective: 1000;
					   perspective: 1000;
					}
					.note1 {
						animation: noteAnimatLeft 3s linear infinite;
					}
					.note2 {
						animation: noteAnimatRight 3s linear infinite;
						animation-delay: 2s;
					}
					.note3 {
						animation: noteAnimatRight 3s linear infinite;
						animation-delay: 1s;
					}
					.note4 {
						animation: noteAnimatRight 3s linear infinite;
						animation-delay: 2s;
					}
					@keyframes noteAnimatLeft {
						0% {
						  left: 30%;
						  top: 0;
						  opacity: 0;
						}
						20% {
							opacity: .8;
						}
						50% {
						  left: 70%;
						  top: -50rpx;
						}
						70% {
							opacity: .8;
						}
						100% {
						  left: 30%;
						  top: -100rpx;
						  opacity: 0;
						}
					  }
					  @keyframes noteAnimatRight {
					  	0% {
					  	  left: 70%;
					  	  top: 0;
					  	  opacity: 0;
					  	}
					  	20% {
					  		opacity: .8;
					  	}
					  	50% {
					  	  left: 30%;
					  	  top: -50rpx;
					  	}
					  	70% {
					  		opacity: .8;
					  	}
					  	100% {
					  	  left: 70%;
					  	  top: -100rpx;
					  	  opacity: 0;
					  	}
					    }
				}
				.music_block_pan {
					image {
						width: 80rpx;
						height: 80rpx;
						animation: changeright 3s linear infinite;
					}
					@keyframes changeright {
						0% {
						  transform: rotate(0deg);
						}
						50% {
						  transform: rotate(180deg);
						}
						100% {
						  transform: rotate(360deg);
						}
					  }
				}
				.notAnimate {
					image {
						animation-play-state: paused;
					}
				}
			}
		}
		.audioDom {
			display: none;
		}
		.pageBack {
			display: flex;
			flex-wrap: wrap;
			width: 100vh;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%) rotateZ(45deg);
			background-color: #fff;
			z-index: -1;
			.page_block {
				width: calc(100% / 4);
				height: calc(100% / 4);
				position: relative;
				background-color: #fff;
				&::after {
					content: '';
					display: inline-block;
					position: absolute;
					width: 40%;
					height: 40%;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					opacity: .8;
					background-color: #ffaa00;
					animation: blockOneAnimat .5s linear;
					animation-fill-mode:forwards;
				}
				@keyframes blockOneAnimat {
					0% {
						width: 40%;
						height: 40%;
						opacity: 0.5;
					}
					50% {
						opacity: 0.5;
						background-color: #fff;
					}
					100% {
						width: 100%;
						height: 100%;
						background-color: #ffaa00;
						opacity: 0;
					}
				  }
				.page_block_in {
					position: absolute;
					width: 60%;
					height: 60%;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background-color: #ffaa00;
					animation: blockInAnimat 1s ease;
					animation-fill-mode:forwards;
					&::before {
						content: '';
						display: inline-block;
						position: absolute;
						width: 50%;
						height: 50%;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						background-color: #fff;
						animation: blockInAnimatChild 1s ease;
						animation-fill-mode:forwards;
					}
					
				}
				@keyframes blockInAnimat {
					0% {
					  width: 60%;
					  height: 60%;
					  opacity: 0;
					}
					50% {
						opacity: .8;
					}
					100% {
					  width: 100%;
					  height: 100%;
					}
					100% {
						opacity: 0;
					}
				  }
				  @keyframes blockInAnimatChild {
				  	0% {
				  	  width: 50%;
				  	  height: 50%;
					  opacity: 0;
				  	}
				  	50% {
				  		opacity: 1;
				  	}
				  	100% {
				  	  width: 100%;
				  	  height: 100%;
				  	}
				  	
				    }
			}
		}
		
	}
	#yourElement {
		animate-duration: 2s;
		animate-delay: 1s;
		animate-iteration-count: 2;
	}
</style>
